import React, { Component } from 'react';
// import axios from 'axios'
import styled from 'styled-components'
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actionCreators} from './store'
const ItemList=(props)=>{
    return(
        <li>
            <Link to={{
                pathname:'/detail',
                search:`?goodstitle=${props.title}&goodsimg=${props.img2}
                &nowprice=${props.nowprice}&delprice=${props.delprice}&id=${props.id}&jugement=${props.jugement}`
            }}>
                <div className='left-box'>
                    <img src={props.img} alt='显示不出来'></img>
                </div>
                <div className='right-box'>
                    <p className='title'>{props.title}</p>
                    <div className='bottom-box'>
                        <p>
                            <span className='tubiao'>￥</span><span className='nowprice'>{props.nowprice}</span><del>{props.delprice}</del>
                        </p>
                        <span className='jugement'>{props.jugement}</span>
                    </div>
                    
                </div>
            </Link>
        </li>
    )
}
 const Container=styled.div`

    background:#eee
    ul{
        li{
            height:1.3rem;
            margin-bottom:.07rem
            a{
                display:block;
                width:100%;
                height:100%;
                position:relative;
                .left-box{ 
                    width:100%;
                    img{
                        width:100%
                    }
                }
                .right-box{
                    height:100%;
                    width:2.03rem
                    position:absolute;
                    right:0;
                    top:0;
                    .title{
                        font-size:13px;
                        margin:.12rem 0;
                        line-height:17px;
                        color:#333;
                        margin-right:.12rem
                    }
                    .bottom-box{
                        padding-top:.18rem
                    }
                    .tubiao{
                        font-size:13px;
                        color:#fe4070
                    }
                    .nowprice{
                        font-size:20px;
                        color:#fe4070
                    }
                    del{
                        margin-left:.08rem
                        color: #999;
                        font-size: 12px;
                    }
                    .jugement{
                        color:#999;
                        font-size:12px;
                    }
                }
            }
            
        }
    }

    `
class Today extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            datalist:null
         };
    }
    componentDidMount(){ //数据请求
        this.props.get_today_data()
    }
    render() {
        // console.log('属性',this.props.todaydata)
        return (
            <Container>
                <ul>
                    {this.props.todaydata&&this.props.todaydata.map(item=><ItemList {...item} key={item.id}/>)}
                </ul>
            </Container>
        );
    }
}

export default connect(
    state=>state.today,
    dispatch=>bindActionCreators(actionCreators,dispatch)
)(Today)

// https://h5.jumei.com/index/ajaxDealactList?card_id=4057&client_v=1&page=1&platform=wap&type=formal&page_key=
//http://localhost:3000/index/ajaxDealactList?card_id=4057&client_v=1&page=1&platform=wap&type=formal&page_key=